<script setup>
import {CaretBottom, Operation, Search, UserFilled} from "@element-plus/icons-vue";
import {ref, onMounted} from 'vue';
import axios from "axios";

const props = defineProps({
  page: String,
  hide: String,
});
const locationHidden = ref({
  display: ''
});
const inputText = ref('');
const textColor = ref('black');
const textColor2 = ref('black');
let city1 = ref('全国')
let citylList = ref([]);
onMounted(() => {
  if (props.hide === 'true') {
    locationHidden.value = {
      display: 'none'
    }
  }
  if (props.page === 'home') {
    console.log('home');
    textColor.value = 'red';
  } else if (props.page === 'classify') {
    console.log('classify');
    textColor2.value = 'red';
  }
  axios.post("http://localhost:8080/city/all").then((res) => {
    citylList.value = res.data;
  })
});
const change = (name) => {
  city1.value = name
  console.log(`Hello, ${name}!`);
};

function refreshPage(name)
{
  // 设置要刷新的页面的URL
  let url = 'http://localhost:5173/body1';

  // 设置要传递的参数
  const params = {
    name: name,
  };

  // 将参数转换为查询字符串
  const queryString = Object.keys(params)
      .map(key => `${encodeURIComponent(key)}=${encodeURIComponent(params[key])}`)
      .join('&');

  // 将查询字符串附加到URL
  window.location.href = `${url}?${queryString}`;
}


</script>
<!--<script>import axios from 'axios';-->

<!--export default {-->
<!--  data() {-->
<!--    return {-->
<!--      inputText: ''-->
<!--    };-->
<!--  },-->
<!--  methods: {-->
<!--    handleSubmit() {-->
<!--      if (this.inputText.trim()) {-->
<!--        axios.post('http://localhost:8080/detail/lookforDetail1Byname', {-->
<!--          text: this.inputText-->
<!--        })-->
<!--            .then(response => {-->
<!--              this.$router.push({ name: 'search', params: { result: response.data } });-->
<!--            })-->
<!--            .catch(error => {-->
<!--              console.error('Error:', error);-->
<!--            });-->
<!--      }-->
<!--    }-->
<!--  }-->
<!--};-->
<!--</script>-->
<template>
  <div class="divE">
    <div class="topMain">
      <el-row class="mainRow">
        <el-col :span="1"></el-col>
        <el-col :span="2">
          <div class="col-center">
            <router-link to="" style="height: 45px">
              <img src="@/a-images/damai.png" alt="大麦" style="height: 45px">
            </router-link>
          </div>
        </el-col>
        <el-col :span="4">
          <div class="col-center">
            <div style="display: flex;flex-direction: row">
              <div :style="locationHidden">
                <el-popover
                    placement="bottom"
                    :width="200"
                    trigger="hover">
                  <template #reference>
                    <div>
                      {{ city1 }}
                      <el-icon style="top: 2px">
                        <caret-bottom/>
                      </el-icon>
                    </div>
                  </template>
                  <template #default>
                    <div v-for="(item, index) in citylList" @click="$router.push('/body1?name='+item.name)">
                      <div @click="change(item.name)">
                        <div @click="refreshPage(item.name)">{{ item.name }}</div>
                      </div>
                    </div>
                  </template>
                </el-popover>
              </div>
              <div class="home-classify">
                <router-link to="/" :style="{color: textColor}">首页</router-link>
                <router-link to="/classify" style="margin-left: 10px" :style="{color: textColor2}">分类</router-link>
              </div>
            </div>
          </div>
        </el-col>
        <el-col :span="5"></el-col>
        <el-col :span="7">
          <div class="col-center">
            <div class="search" >
              <div class="searchInput">
                <div class="searchInputIcon">
                  <el-icon size="20">
                    <Search/>
                  </el-icon>
                </div>
                <div class="input">
                  <input type="text" placeholder="搜索明星、演出、体育赛事" v-model="inputText"/>
                </div>
              </div>
              <div class="searchButton" @click="$router.push('/search?inputText='+inputText)"><a>搜 索</a></div>
            </div>
          </div>
        </el-col>
        <el-col :span="1"></el-col>
        <el-col :span="3">
          <div class="col-center" style="justify-content: space-between">
            <div style="cursor: pointer" @click="">
              <el-icon size="20" style="top: 4px">
                <user-filled/>
              </el-icon>
              <router-link class="a11" to="/login">登录</router-link>
              </div>
            <div style="cursor: pointer" @click="">
              <el-icon size="20" style="top: 4px">
                <operation/>
              </el-icon>
              <a style="margin-left: 5px">更多</a></div>
          </div>
        </el-col>
        <el-col :span="1"></el-col>
      </el-row>
    </div>
  </div>
</template>

<style scoped lang="scss">
.a11{
  margin-left: 5px;
  color: black;
  text-decoration: none;
}
.divE {
  border-bottom: whitesmoke 2px solid;
  display: flex;
  width: 100%;
  align-content: center;
  justify-content: center;
}

.topMain {
  z-index: 100;
  height: 70px;
}

.col-center {
  display: flex;
  height: 100%;
  justify-content: center;
  align-items: center;
}

.home-classify {
  margin-left: 30px;
  font-size: 16px;

  a {
    text-decoration-line: none;
    color: black;
  }
}

.searchButton {
  font-size: 16px;
  cursor: pointer;
  color: whitesmoke;
  background-color: rgb(249, 0, 104);
  height: 100%;
  width: 74px;
  border-bottom-right-radius: 50px;
  border-top-right-radius: 50px;
  display: flex;
  align-items: center;

  a {
    position: relative;
    left: 15px;
  }
}

.searchInput {
  width: 276px;
  height: 100%;
  border-bottom-left-radius: 50px;
  border-top-left-radius: 50px;
  background-color: whitesmoke;
  display: flex;
  flex-direction: row;

  .searchInputIcon {
    height: 100%;
    width: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .input {
    height: 100%;

    input {
      width: 220px;
      height: 40px;
      font-size: 15px;
      border: 0 solid whitesmoke;
      background-color: whitesmoke;
    }

    input:focus {
      outline: none;
      border: none;
    }
  }
}

.search {
  width: 350px;
  height: 42px;
  border-radius: 50px;
  display: flex;
  flex-direction: row;
}

.mainRow {
  height: 70px;
  min-width: 1250px;
}

@media (min-width: 1700px) {
  .topMain {
    width: 1500px;
  }
}
</style>
